<template>
  <el-row style="width:1900px">
    <el-col :span="50">
      <div class="grid-content bg-purple-dark" style="position: relative;">


        <div class="layout-header-left  align-items-center user-select-none" style="display: inline-block;">
          <!-- 标题 -->
          <h1 class="layout-header-left-title ml-3 mb-4" style="color: #fff;">后台管理系统</h1>
          <!-- 左侧 logo 和 标题区域 -->
          <!-- 右侧按钮区域 -->
        </div>
        <div style="width: 100px; height: 40px; display: inline-block;position: absolute;top: 13px;left: 1780px;">
          <button type="button" class="btn btn-light" @click="logout" style="width:100px height: 90px;">退出登录</button>
        </div>

      </div>
    </el-col>
  </el-row>


</template>

<script>
export default {
  name: 'MyHeader',
  methods:{
    logout() {
      // 清空token
      localStorage.removeItem('token')
      // 跳转到登录页面
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="less" scoped>


.layout-header-container {
  height: 60px;
  border-bottom: 1px solid #eaeaea;
}


.layout-header-left-img {
  height: 50px;
}
// .layout-header-left-img 
//   height: 50px;
// 
* {
  background-color: rgb(36, 47, 66);
}
.layout-header-left-img {
  height: 50px;

}

</style>